<template>
  <div class="exptadd">
    <div class="exptadd-title">创建实验</div>
    <div class="exptadd-step">
      <div
        v-for="(item, index) in stepList"
        :key="item.id"
        class="exptadd-step-item"
        :class="{
          'exptadd-step-hasarrow': index < stepList.length - 1,
          'exptadd-step-active': currentStep == item.id,
          'exptadd-step-previous': currentStep > item.id,
        }"
        @click="stepClick(item.id)"
      >
        <span class="round"></span> {{ item.name }}
      </div>
    </div>
    <div class="exptadd-content">
      <el-form
        ref="ruleFormRef"
        :model="exptForm"
        :rules="rules"
        class="demo-ruleForm"
        size="small"
      >
        <div v-if="currentStep == 0" class="form-item">
          <BasicEditing :exptForm="exptForm"></BasicEditing>
        </div>
        <div v-if="currentStep == 1" class="form-item">
          <FightRequire :exptForm="exptForm"></FightRequire>
        </div>
        <div v-show="currentStep == 2" class="form-item">
          <TroopsRequire :exptForm="exptForm"></TroopsRequire>
        </div>
        <div v-show="currentStep == 3" class="form-item">
          <SeatSetting :exptForm="exptForm" ></SeatSetting>
        </div>
      </el-form>
    </div>
    <div class="exptadd-footer">
      <el-button v-if="currentStep > 0" @click="nextStep">上一步</el-button>
      <el-button v-if="currentStep < stepList.length - 1" @click="previousStep"
        >下一步</el-button
      >
      <el-button v-if="currentStep == stepList.length - 1" @click="confirm"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import BasicEditing from "./components/basicEditing.vue";
import FightRequire from "./components/fightRequire.vue";
import TroopsRequire from "./components/troopsRequire.vue";
import SeatSetting from "./components/seatSetting.vue";
// const width = computed(()=>{
//   console.log(activeTabRef.value);
//   return
// })
// console.log(width);
const props = defineProps({});
let emit = defineEmits([""]);
const stepList = [
  {
    name: "实验基础编辑",
    id: 0,
  },
  {
    name: "初始作战要求",
    id: 1,
  },
  {
    name: "初始兵力要求",
    id: 2,
  },
  {
    name: "实验席位设置",
    id: 3,
  },
];
const currentStep = ref(3);

async function check(formEl) {
  if (!formEl) return;
  let flag;
  await formEl.validate((valid, fields) => {
    if (valid) {
      flag = true;
    } else {
      flag = false;
    }
  });
  return flag;
}
const stepClick = async (id) => {
  let res = await check(ruleFormRef.value);
  if (res) {
    console.log(333);
    currentStep.value = id;
  } else {
    return;
  }
};
// 下一步
const nextStep = () => {
  currentStep.value--;
};
// 上一步
const previousStep = () => {
  currentStep.value++;
  console.log(exptForm.value);
};
// 确定
const confirm = () => {};

const exptForm = ref({
  campList: [
    {
      name: "红方",
      id: 0,
      country: "",
      color: "red",
      entityList: [],
      formationList: [],
      seatList:[
        {
          seatRole:1,
          seatNum:2,
        },
        {
          seatRole:2,
          seatNum:3,
        },
      ]
    },
    {
      name: "蓝方方",
      id: 1,
      country: "",
      color: "red",
      entityList: [],
      formationList: [],
      seatList:[
        {
          seatRole:1,
          seatNum:5,
        },
        {
          seatRole:2,
          seatNum:3,
        },
      ]
    },
  ],
});

const ruleFormRef = ref(null);
const rules = {
  exptName: [
    { required: true, message: "请输入实验名称", trigger: "blur" },
    { min: 0, max: 30, message: "实验名称限制0-30个字", trigger: "blur" },
  ],
  exptPurpose: [
    { required: true, message: "请输入实验名称", trigger: "blur" },
    { min: 0, max: 30, message: "实验名称限制0-30个字", trigger: "blur" },
  ],
  exptLevel: [{ required: true, message: "请选择实验级别", trigger: "change" }],
  responsiblePerson: [
    {
      required: true,
      message: "请选择实验负责人",
      trigger: "change",
    },
  ],
  jobContent: [
    {
      type: "array",
      required: true,
      message: "请选择实验工作内容",
      trigger: "change",
    },
  ],
  stageTime: [
    {
      type: "array",
      required: true,
      message: "请设置实验阶段时间",
      trigger: "change",
    },
  ],
  campSettings: [
    {
      type: "array",
      required: true,
      message: "请设置阵营",
      trigger: "change",
    },
  ],
  exptDescribe: [
    { required: true, message: "请输入实验描述", trigger: "blur" },
  ],
  requirementsDescribe: [
    { required: true, message: "请输入作战要求描述", trigger: "blur" },
  ],
  troopsDescribe: [
    { required: true, message: "请输入实验兵力求描述", trigger: "blur" },
  ],
  fightTime: [
    {
      type: "array",
      required: true,
      message: "请选择作战时间",
      trigger: "change",
    },
  ],
};

// 阵营列表
const campList = ref([
  {
    name: "红方",
    id: 0,
    country: "",
    color: "red",
    entityList: [],
    formationList: [],
  },
  {
    name: "蓝方",
    id: 1,
    country: "",
    color: "blue",
    entityList: [],
    formationList: [],
  },
  {
    name: "我是中立方的啊",
    id: 2,
    country: "",
    color: "blue",
    entityList: [],
    formationList: [],
  },
  {
    name: "我是中立方的啊我是中立方的啊我是中立方的啊",
    id: 3,
    country: "",
    color: "blue",
    entityList: [],
    formationList: [],
  },
  {
    name: "绿方",
    id: 4,
    country: "",
    color: "green",
    entityList: [],
    formationList: [],
  },
  {
    name: "我是中立方的啊我是中立方的啊我是中立方的啊",
    id: 5,
    country: "",
    color: "blue",
    entityList: [],
    formationList: [],
  },
  {
    name: "我是中立方的啊我是中立方的啊我是中立方的啊",
    id: 6,
    country: "",
    color: "blue",
    entityList: [],
    formationList: [],
  },
]);

onMounted(() => {});
</script>
<style scoped lang="scss">
$titleh: 50px;
$steph: 46px;
$footerh: 40px;
.exptadd {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  &-title {
    height: $titleh;
  }
  &-step {
    border-radius: 5px;
    width: 80%;
    margin: 0 auto;
    height: $steph;
    display: flex;
    align-items: center;
    background: #f5f7fa;
    color: #c0c4cc;
    font-size: 20px;

    &-item {
      position: relative;
      flex: 1;
      text-align: center;
      .round {
        width: 20px;
        height: 20px;
        border: 2px solid #c0c4cc;
        border-radius: 50%;
        content: "";
        position: absolute;
        left: 26%;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }
    &-hasarrow {
      &::after {
        width: 20px;
        height: 20px;
        border-top: 5px solid;
        border-right: 5px solid;
        border-color: #c0c4cc;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }
    &-active {
      color: #169bd5;
      .round {
        border-color: #169bd5;
      }
      &::after {
        border-color: #169bd5;
      }
    }
    &-previous {
      color: #8dd16b;
      .round {
        border-color: #8dd16b;
        &::before {
          width: 8px;
          position: absolute;
          top: 50%;
          left: 50%;
          content: "";
          height: 16px;
          border-color: #8dd16b;
          border-style: solid;
          border-width: 0 3px 5px 0;
          transform: translate(-50%, -50%) rotate(10deg);
        }
      }
      &::after {
        border-color: #8dd16b;
      }
    }
  }
  &-content {
    height: calc(100% - $steph - $titleh - $footerh);
    width: 100%;

    padding: 30px 0 10px 0;
  }
  &-footer {
    height: $footerh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
:deep() {
  .demo-ruleForm {
    width: 60%;
    margin: 0 auto;
    height: 100%;
    padding: 0;
    // border:2px solid red;

    .form-item {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      // border: 2px solid red;
    }

    .el-textarea__inner {
      background-color: #424242 !important;
      color: #fff;
    }
  }
}
</style>
